var canvas = document.getElementById('canvas');

var drawBoard = {
    //定义全局变量
    gloaObj: {
        W: document.body.clientWidth,
        H: document.body.clientHeight,
        CTX: null,
        DATA: [],	//储存绘制数据
        COLOR: '#f00056',
        LINE: 5,
        PENS: 0,
        ERAS: 0,
        TIMER: null,
        SX: 0,
        SY: 0,
        onOff: false,
        IsMouseDown: false
    },
    init: function () {
        //显示画板
        drawBoard.showBoard();
        //默认画笔功能
        drawBoard.drawPen();
    },
    //显示画板
    showBoard: function () {

        var canvas = document.getElementById('canvas');
        drawBoard.gloaObj.CTX = canvas.getContext('2d');

        canvas.style.display = 'block';
        canvas.width = drawBoard.gloaObj.W;
        canvas.height = drawBoard.gloaObj.H;



    },
    drawPenMouseDown: function (params) {
        drawBoard.SX = params.sx;
        drawBoard.SY = params.sy;
        drawBoard.IsMouseDown = true;
        console.log("clinet_drawPenMouseDown");
    },
    drawPenMouseMove: function (ex, ey) {
        drawBoard.gloaObj.CTX.beginPath();
        drawBoard.gloaObj.CTX.moveTo(drawBoard.SX, drawBoard.SY);
        drawBoard.gloaObj.CTX.lineTo(ex, ey);
        drawBoard.gloaObj.CTX.closePath();
        drawBoard.gloaObj.CTX.strokeStyle = drawBoard.gloaObj.COLOR;
        drawBoard.gloaObj.CTX.lineJoin = 'round';
        drawBoard.gloaObj.CTX.lineCap = 'round';
        drawBoard.gloaObj.CTX.lineWidth = drawBoard.gloaObj.LINE;
        drawBoard.gloaObj.CTX.stroke();
        drawBoard.SX = ex;
        drawBoard.SY = ey;
    },
    drawPenMouseUp: function () {
        document.onmousemove = '';
    },
    //画笔功能
    drawPen: function () {

        document.onmousedown = function (ev) {
            var ev = ev || event;
            var sx = ev.clientX;
            var sy = ev.clientY;

            drawBoard.drawPenMouseDown(sx, sy);
        }


        document.onmousemove = function (ev) {

            if (drawBoard.IsMouseDown != true) {
                return false;
            }

            var ev = ev || event;
            var ex = ev.clientX;
            var ey = ev.clientY;

            drawBoard.drawPenMouseMove(ex, ey);

        };

        document.onmouseup = function (ev) {
            var ev = ev || event;
            var sx = ev.clientX;
            var sy = ev.clientY;

            drawBoard.SX = 0;
            drawBoard.SY = 0;
            drawBoard.IsMouseDown = false;
        }

    }
};

var drawQueue = [];

function sayHello(str) {
    str = str || "hello";
    alert(str);
}


$("#btn_send").click(function () {
    //测试excuteFunc是否可用
    excuteFunc(sayHello, "123")

});

function excuteFunc(data) {

    var method, params, scope;
    method = data.method;
    params = data.params
    scope = data.scope || window;

    // method.call(scope, params);

    var keyArr = method.split(".");

    var finalMethod = scope;

    for (let index = 0; index < keyArr.length; index++) {
        const key = keyArr[index];
        finalMethod = finalMethod[key];
    }

    finalMethod(params)

    SendMsg({
        method: data.method,
        params: data.params
    })

}


//初始化  其实直接调就行 测试而已
excuteFunc({
    method: "drawBoard.init",
    params: {},
    scope: window
});



//SendMsg("111");

